<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://10.35.164.246/allPage/css/list_2.css">
    <link rel="stylesheet" href="http://10.35.164.246/allPage/css/reset.css">
</head>

<body>
    <header>
        <div class="head">
            <h1 class="logo">
            </h1>
            <ul class="list">
                <li>
                    <a href="http://10.35.164.246/allPage/index.html">网站首页</a>
                </li>
                <li>
                    <a href="">传悦资源</a>
                </li>
                <li>
                    <a href="http://10.35.164.246/allPage/list_1.html">传悦案例</a>
                </li>
                <li class="active">
                    <a href="">解决方案</a>
                </li>
                <li>
                    <a href="">需求提交</a>
                </li>
            </ul>
            <ul class="photo">
                <li class="first">
                    0535-60652189
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_03.jpg" alt="">
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_05.jpg" alt="">
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_07.jpg" alt="">
                </li>
                <li>
                    <img src="http://10.35.164.246/img/love_09.png" alt="">
                </li>
            </ul>
        </div>

    </header>
    <div class="banner">
        <div class="nav">
            <div class="nav-con">
                <span>
                    <a href=""> 网站首页</a>
                </span>
                <span>&gt;</span>
                <span>
                    <a href=""> 传悦观点</a>         
                </span>
            </div>
        </div>
    </div>

    <main>
        <div class="itemContent" id="template">
            <!-- http://10.35.164.246/allPage/details_2.html -->
            <a href="">
                <div class="itemLeft">
                    <div class="time">
                        <h6></h6>
                        <h2></h2>
                    </div>
                    <img alt="" class="newPho">
                </div>
                <div class="itemRight">
                    <img alt="" class="phone">
                    <ul class="content">
                        <li>
                            <h3></h3>
                        </li>
                        <li>
                            <i></i>
                            <span></span>
                        </li>
                        <li>
                            <p></p>
                        </li>
                    </ul>
                </div>
            </a>

        </div>
    </main>

    <div class="switch">
        <ul class="tabSwtich">
            <li>
                <a href="#">&lt;</a>
            </li>
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#" class="focus">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
            <li>
                <a href="#">4</a></li>
            <li>
                <a href="#">&gt;</a>
            </li>
        </ul>
    </div>

    <footer>
        <div class="content">
            <div class="left">
                <a href="#">
                    <img src="http://10.35.164.246/img/logo-dm_03.jpg" />
                </a>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">关于传悦</a></li>
                    <li><a href="#">新闻动态</a></li>
                    <li><a href="#">传悦观点</a></li>
                    <li><a href="#">联系传悦</a></li>
                    <li><a href="#">加入传悦</a></li>
                    <li><a href="#">付费账户</a></li>
                </ul>
                <p>
                    Copyright ©2013 创梦网络科技有限责任公司 ‖ 传悦 Chnyoo.cn All Rights Reserved 京ICP备12005221号
                </p>
            </div>
        </div>
    </footer>

</body>

</html>

<script>
    //对获取参数的操作进行一系列封装
    function $(selector) {
        let result = document.querySelectorAll(selector);
        if (result.length === 1) {
            return result[0];
        } else {
            return result;
        }
    }

    let http = new XMLHttpRequest();

    http.open("get", "http://10.35.164.246:81/listSolution");
    http.send();
    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            //对后端传送的数据进行正解析
            let textList = JSON.parse(http.responseText);
            //动态生成数据
            textList.forEach(function(item) {
                let newItem = $("#template").cloneNode(true);
                newItem.id = "";
                $("main").appendChild(newItem);

                newItem.querySelector("h6").innerHTML = item.day;

                newItem.querySelector("h2").innerHTML = item.time;

                newItem.querySelector(".newPho").setAttribute("src", item.pho1);

                newItem.querySelector(".phone").setAttribute("src", item.pho2);

                newItem.querySelector("li h3").innerHTML = item.title;

                newItem.querySelector("li i").innerHTML = item.bold;

                newItem.querySelector("li span").innerHTML = item.follow;

                newItem.querySelector("li p").innerHTML = item.text;

                newItem.setAttribute("data-id", item.id);

                newItem.querySelector("a").href = `details_2.html?id=${item.id}`;

            });
        }
    }
</script>